$(function () {
    let layer = layui.layer;
    initArtCateList()

    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get',
        }).then(res => {
            //成功回调
            console.log(res)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //成功后直接渲染
            let arr = []
            // 遍历返回的数据
            res.data.data.forEach(function (ele) {
                arr.push(`
                <tr>
                    <td>${ele.Id}</td>
                    <td>${ele.name}</td>
                    <td>${ele.alias}</td>
                    <td>
                        <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button>
                        <button data-id="${ele.Id}" class="btn-dele layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>`)
            })
            // 赋值: empty()删除所有子节点
            $("tbody").empty().html(arr.join(""))
        });
    }

    //添加按钮
    let indexArr = 0
    $("#addBtn").on('click', function () {
        indexArr = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '260px'],
            content: `
            <form id="addForm" class="layui-form" action="">
            <!-- 1.分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 2.分类别名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 3.按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>`
        })
    })

    //添加文章分类
    $("body").on('submit', "#addForm", function (e) {
        e.preventDefault()
        axios({
            url: '/my/article/addcates',
            method: 'post',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            layer.msg("恭喜你添加成功")
            //    刷新页面
            initArtCateList()
            //关闭弹出层
            layer.close(indexArr);
        });
    })

    //修改按钮
    let indexEdit = 0
    $("tbody").on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '260px'],
            content: `
            <form lay-filter="editForm" id="editForm" class="layui-form" action="">
                <!-- 0.Id -->
                <input type="hidden" name="Id">
                <!-- 1.分类名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 2.分类别名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 3.按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
        </form>`
        })
        //在点击事件里面  弹窗后获取id
        let id = $(this).attr('data-id')
        axios({
            url: '/my/article/cates/' + id,
            method: 'get'
        }).then(res => {
            if (res.data.status != 0) {
                //成功回调
                return layer.msg(res.data.message)
            }
            layui.form.val('editForm', res.data.data)
        });
    })

    //点击修改按钮 修改文章分类
    $("body").on('submit', "#editForm", function (e) {
        e.preventDefault()
        axios({
            url: '/my/article/updatecate',
            method: 'POST',
            data: $(this).serialize()
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜您，修改文章分类成功！');
            // 刷新页面
            initArtCateList();
            // 关闭弹出层
            layer.close(indexEdit);
        });
    })

    //删除
    $("tbody").on('click', ".btn-dele", function () {
        let id = $(this).attr('data-id')
        if (id == 1 || id == 2) {
            return layer.msg('第一个和第二不能删除')
        }
        layer.confirm('是否删除',{icon: 3, title: '提示'},function(index){
            axios({
                method: 'GET',
                //    / 必须保留   : 必须删除   id 换成动态值;
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message);
                }
                // 成功
                initArtCateList();
                // 提示
                layer.msg("恭喜您，删除文章分类成功！");
            });
            layer.close(index);
        })
    })
})